<!DOCTYPE html>
<html>
<head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	div{
		margin: 40px;
		border:2px solid blue;
		width:300px;
		padding:10px 40px; 
		/*重要代码*/
		resize:both;
		overflow:auto;
	}
	div.border-box{
		border: 2px solid blue;
		/*包含margin+border+padding*/
		box-sizing:border-box;
	}
	div.content-box{
		border: 2px solid blue;
		box-sizing:content-box;
	}
</style>
</head>
<body>
	<div>resize 属性规定是否可由用户调整元素尺寸。</div>
	<p></p>
	<p></p>
	<p style="margin-left: 40px">box-sizing:content-box|border-box</p>
	<p style="margin-left: 40px">盒子的四个组成区域相对应，每个盒子有四个
		边界：内容边界 Content edge、内边距边界 Padding Edge、边框边
		界 Border Edge、外边框边界 Margin Edge。</p>


	<div class="border-box">border-box</div>
	<div class="content-box">content-box</div>

</body>
</html>
